<template>
  <Suspense>
    <template #default>
      <router-view v-slot="{ Component }" class="router-name">
        <transition :name="animation" mode="out-in">
          <keep-alive :include="keepList">
            <component :is="Component" :key="routerKey"></component>
          </keep-alive>
        </transition>
      </router-view>
    </template>
    <template #fallback>
      <div class="flex justify-center pt-[30px]">
        <NSpin size="large" />
      </div>
    </template>
  </Suspense>
</template>

<script setup lang="ts">
import { inject, ref, watchEffect } from 'vue'
import { NSpin } from 'naive-ui'
import { handleActivePath } from '@/router/utils'
import { themesStore } from '@/stores/modules/theme'
import { useTabsStore } from '@/stores/modules/tabs'
import { useRoute, RouterView } from 'vue-router'
import { storeToRefs } from 'pinia'
import type { lockState } from '@/types/tabs'

const $clone = inject('$clone') as <T>(data: T) => T
const route: any = useRoute()
const tabsStore = useTabsStore()
const themeStore = themesStore()
const { getVisitedRoutes: visitedRoutes, getLocaks: locks } =
  storeToRefs(tabsStore)
const { getAnimation: animation } = storeToRefs(themeStore)
const routerKey = ref()
const keepList = ref([])
watchEffect(() => {
  routerKey.value = handleActivePath(route, true)
  const arr = $clone(locks.value).map((el: lockState) => {
    return el.childer
  })
  arr.push($clone(visitedRoutes.value))
  keepList.value = arr.flat().map((el: any) => {
    return el.name
  })
})
</script>

<style lang="scss" scoped>
.router-name {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
</style>
